<template>
  <view class="webIndex-study">
    <u-navbar :is-back="false" title="骑手学习中心"></u-navbar>
    <u-subsection height="90" :list="list" :current="current" active-color="#ff9900" bg-color="#ff9900"
      inactive-color="#fff" @change="changeTab"></u-subsection>
    <view style="display: flex;justify-content: flex-end;margin: 10rpx 0">
      <u-subsection v-show="current != '3'" style="width: 400rpx;margin-right: 20rpx" height="60" :list="list2"
        :current="current2" active-color="#2979ff" bg-color="#2979ff" inactive-color="#fff"
        @change="changeTab2"></u-subsection>
      <u-subsection v-if="current == 3" style="width: 500rpx;margin-right: 20rpx" height="60" :list="list3"
        :current="current2" active-color="#2979ff" bg-color="#2979ff" inactive-color="#fff"
        @change="changeTab2"></u-subsection>
    </view>

    <view v-if="!isEmptyStr(videoList)" class="study-content">
      <view class="webIndex-studyList-item" v-for="item in videoList" @click="videoInfo(item)">
        <u-image v-if="!item.isKaoshi" width="130rpx" height="140rpx" :src="`${proxyUrl}/static/video.png`"></u-image>
        <u-image v-else width="130rpx" height="140rpx" style="padding:10rpx;border-radius: 20px;overflow: hidden;"
          :src="`${proxyUrl}/static/kaoshi.png`"></u-image>
        <view class="webIndex-studyList-item-center">
          <view class="webIndex-studyList-item-text">{{ item.courseName }}</view>
          <view v-if="!item.isKaoshi" class="webIndex-studyList-item-text"
            style="color: #aaa;font-size: 30rpx;display: flex;align-items: center;line-height: 1"><u-icon size="34"
              name="play-circle-fill" style="margin-right: 6rpx"></u-icon>视频时长：{{ formatTime(item.courseSize) }}</view>
          <view v-else-if="item.shijuan" class="webIndex-studyList-item-text"
            style="color: #aaa;font-size: 30rpx;display: flex;align-items: center;line-height: 1"><u-icon size="34"
              name="star-fill" style="margin-right: 6rpx"></u-icon> {{ item.number == 'null' ? '试卷' : `
            试卷共${item.number}道题` }}
          </view>
          <view v-else class="webIndex-studyList-item-text"
            style="color: #aaa;font-size: 30rpx;display: flex;align-items: center;line-height: 1"><u-icon size="34"
              name="star-fill" style="margin-right: 6rpx"></u-icon> {{ item.number == 'null' ? '随堂测试' : `
            随堂测试共${item.number}道题` }}
          </view>
        </view>
        <!-- <view style="display: flex;flex-direction: column; align-items: center;justify-content: space-around;height: 100%;flex: 0.35"> -->
        <u-button v-if="!item.isKaoshi" :type="item.status != 1 ? 'warning' : 'success'" size="mini"
          @click="videoInfo(item)">{{ item.status != 1 ? '去学习' : '去复习' }}</u-button>
        <u-button v-else-if="item.canExam != 1 || (item.canExam == 1 && item.status == 1)" :type="isPassFunc2(item)"
          size="mini" @click="videoInfo(item, 'isKaoshi')">{{
            isPassFunc(item) }}</u-button>
        <!-- <u-button style="margin-top: 10rpx;" v-else-if="item.surveyStatus ==2 "  :type="'primary'" size="mini" @click="videoInfo(item, 'isKaoshi')">查看答案
        </u-button> -->
        <!-- </view> -->

      </view>
    </view>
    <u-empty v-else style="margin-top: -20%" mode="list" icon-size="160"></u-empty>
  </view>
</template>

<script>
import { isEmpty } from "@/utils";

export default {
  name: "webIndex-study",
  data() {
    return {
      proxyUrl: (window.location.href.includes('/xsdcrm-wechat-ui/') ? '/xsdcrm-wechat-ui/' : ''),
      list: [
        // {
        //   name: '企业简介'
        // },
        {
          name: '入门课程'
        },
        {
          name: '进阶课程'
        },
        {
          name: '高阶课程'
        },
        {
          name: '我的考试'
        }
      ],
      list2: [
        {
          name: '全部'
        },
        {
          name: '未学'
        },
        {
          name: '学习中'
        },
        {
          name: '已学'
        }
      ],
      list3: [
        {
          name: '全部'
        },
        {
          name: '未考试'
        },
        {
          name: '可补考'
        },
        {
          name: '已通过'
        },
        {
          name: '未通过'
        }
      ],
      current: 0,
      current2: 0,
      studyOption: [],
      studyStatus: '',
      videoList: [],
    }
  },
  async onShow() {
    await this.getBankDictList()
  },
  async onLoad(option) {

    // let a = {
    //   createBy:null,
    //   createTime:null,
    //   demands:null,
    //   id:null,
    //   isDel:null,
    //   isNm:null,
    //   params:{},
    //   question:null,
    //   remark:null,
    //   ridersId:123123,
    //   ridersName:"武金明",
    //   ridersPhone:"13820284049",
    //   searchValue:null,
    //   sideId:5738,
    //   sideName:"天津新速达【张家口】容辰站",
    //   updateBy:null,
    //   updateTime:null,
    //   courseItem:''
    // }
    //   uni.setStorageSync('riderInfo',a)
    this.current = option.type
    if (option.type == '1') {
      this.isOk = false
    }
    // await this.getBankDictList()

  },
  methods: {
    isPassFunc(item) {
      let str = ''
      console.log(item)
      if (((item.surveyStatus == 2 && item.submitShow == '2') || item.submitShow == '1') && item.isPass != 1 && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) > Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
        str = '未通过可查看答案'
      } else if (item.surveyStatus == '2' && item.submitShow == '2') {
        str = '考试截止可查看答案'
      } else if (item.surveyStatus == '2' && item.submitShow == '3') {
        str = '考试截止'
      } else if (item.isPass && item.isPass != 1 && item.examNumber != '0' && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) <= Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
        str = '去补考'
      } else if (item.isPass != 1 && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) > Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
        str = '未通过'
      } else if (item.isPass != 1 && (item.examNumber == '0' || !item.examNumber)) {
        str = '去考试'
      } else if (item.isPass == 1 && item.submitShow == '1') {
        str = '已通过查看答案'
      } else {
        str = '已通过'
      }
      return str
    },
    isPassFunc2(item) {
      let str = ''
      if (item.isPass && item.isPass != 1 && item.examNumber != '0' && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) <= Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
        str = 'warning'
      } else if (item.isPass != 1 && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) > Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
        str = 'error'
      } else if (item.isPass != 1) {
        str = 'primary'
      } else {
        str = 'success'
      }
      return str
    },
    async getList(type) {
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      let riderInfo = uni.getStorageSync('riderInfo')
      if (this.current == 3) {
        console.log(this.current)
        const comSurveyIds = [];
        const incomSurveyIds = []
        let { rows } = await this.$api.questionnaire.acquireQualication({ ridersId: riderInfo.question })
        if (isEmpty(rows)) {
          this.videoList = []
          uni.hideLoading();
          return
        }
        let arr = []
        rows.forEach((item) => {
          let param = {
            isKaoshi: item.surveyStatus != 0 ? true : flase,
            shijuan: true,
            submitShow: item.submitShow,
            surveyStatus: item.surveyStatus,
            courseName: item.wenjuanSurveyName,
            isExam: item.wenjuanSurveyId,
            isPass: item.isPass,
            examNumber: item.examNumber,
            number: item.number,
            repair: item.repair,
          }

          //     if (item.isPass && item.isPass != 1 && item.examNumber != '0' && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) <= Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
          //   str = '去补考'
          // } else if (item.isPass != 1 && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) > Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
          //   str = '未通过'
          // } else if (item.isPass != 1) {
          //   str = '去考试'
          // } else {
          //   str = '已通过'
          // }

          if (!type || type == 0) {
            arr.push(param)
          } else if (type == 2 && item.isPass && item.isPass != 1 && item.examNumber != '0' && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) <= Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
            arr.push(param)
          } else if (type == 4 && item.isPass != 1 && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) > Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
            arr.push(param)
          } else if (type == 1 && item.isPass != 1 && (item.examNumber == '0' || !item.examNumber)) {
            arr.push(param)
          } else if (type == 3 && item.isPass == 1) {
            arr.push(param)
          }
        })
        this.videoList = arr;
        uni.hideLoading();
        return
      }
      let { rows } = await this.$api.dormitory.learningrecordList({ ridersId: riderInfo.question, courseItem: this.courseItem, status: this.studyStatus })
      let arr = []
      rows.forEach(v => {
        let obj = JSON.parse(JSON.stringify(v))
        obj.isKaoshi = false
        arr.push(obj)
        if (!isEmpty(v.isExam) && v.examIsDelete != 1 && v.surveyStatus != 0) {
          v.isKaoshi = true
          arr.push(v)
        }
      })
      this.videoList = arr;
      console.log(arr)
      uni.hideLoading();
    },
    videoInfo(item, type) {
      uni.setStorageSync('videoInfo', item)
      if (item.isKaoshi) {

        if (item.canExam == 1 && item.status != 1) {
          uni.showToast({ title: '完成视频学习后，方可参加考试！', icon: 'none', duration: 1500 })
        } else if (((item.surveyStatus == 2 && item.submitShow == '2') || item.submitShow == '1') && item.isPass != 1 && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) > Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
          uni.navigateTo({
            url: `/pages/webIndex-questions/main/index?id=${item.wenjuanSurveyId ? item.wenjuanSurveyId : item.isExam}&isAnswer=1`
          })
        } else if (item.surveyStatus == '2' && item.submitShow == '2') {
          uni.navigateTo({
            url: `/pages/webIndex-questions/main/index?id=${item.wenjuanSurveyId ? item.wenjuanSurveyId : item.isExam}&isAnswer=1`
          })
        } else if (item.isPass && item.isPass != 1 && item.examNumber != '0' && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) <= Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
          uni.navigateTo({
            url: `/pages/webIndex-questions/main/index?id=${item.isExam}`
          })
        } else if (item.surveyStatus == '2' && item.submitShow == '3') {
          uni.showToast({ title: '此次考试已截止，无法重复参考！', icon: 'none', duration: 1500 })
        } else if (item.isPass != 1 && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) > Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
          uni.showToast({ title: '此次考试未通过，无法重复参考！', icon: 'none', duration: 1500 })
        } else if (item.isPass != 1 && (item.examNumber == '0' || !item.examNumber)) {
          uni.navigateTo({
            url: `/pages/webIndex-questions/main/index?id=${item.isExam}`
          })
        } else if (item.isPass == 1 && item.submitShow == '1') {
          uni.navigateTo({
            url: `/pages/webIndex-questions/main/index?id=${item.wenjuanSurveyId ? item.wenjuanSurveyId : item.isExam}&isAnswer=1`
          })
        } else {
          uni.showToast({ title: '此次考试已通过，无需重复参考！', icon: 'none', duration: 1500 })
        }


        // if (item.canExam == 1 && item.status != 1) {
        //   uni.showToast({ title: '完成视频学习后，方可参加考试！', icon: 'none', duration: 1500 })
        // } else if (((item.surveyStatus == 2 && item.submitShow == '2') || item.submitShow == '1')) {
        //   uni.navigateTo({
        //     url: `/pages/webIndex-questions/main/index?id=${item.wenjuanSurveyId ? item.wenjuanSurveyId : item.isExam}&isAnswer=1`
        //   })
        // } else if (item.surveyStatus == '2' && item.submitShow == '3') {
        //   uni.showToast({ title: '此次考试已截止，无法重复参考！', icon: 'none', duration: 1500 })
        // } else if (item.isPass != 1 && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) > Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
        //   uni.showToast({ title: '此次考试未通过，无法重复参考！', icon: 'none', duration: 1500 })
        // } else if (item.isPass != 1 && item.examNumber != '0' && Number(item.examNumber && item.examNumber != 'null' ? item.examNumber : 0) <= Number(item.repair && item.repair != 'null' ? item.repair : 0) + 1) {
        //   uni.navigateTo({
        //     url: `/pages/webIndex-questions/main/index?id=${item.isExam}`
        //   })
        // } else if (item.isPass != 1) {
        //   uni.navigateTo({
        //     url: `/pages/webIndex-questions/main/index?id=${item.isExam}`
        //   })
        // } else {
        //   uni.showToast({ title: '此次考试已通过，无需重复参考！', icon: 'none', duration: 1500 })
        // }

        
        return
      }

      uni.navigateTo({
        url: `/pages/rider-center/webIndex-video?id=${item.id}`
      })
    },
    isEmptyStr(e) {
      return isEmpty(e)
    },
    formatTime(seconds) {
      if (isNaN(seconds)) return '暂无'
      // 计算小时、分钟和秒
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      const remainingSeconds = seconds % 60;

      // 将小时、分钟、秒数补零
      const formattedHours = String(hours).padStart(2, '0');
      const formattedMinutes = String(minutes).padStart(2, '0');
      const formattedSeconds = String(remainingSeconds).padStart(2, '0');

      // 返回格式化后的时间
      return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
    },
    changeTab(i) {
      this.current = i
      this.courseItem = this.studyOption[i]?.value
      this.getList()
    },
    changeTab2(i) {
      this.current2 = i
      if (this.current == 3) {
        this.getList(i)
        return
      }
      let arr = ['', 0, 2, 1]
      this.studyStatus = arr[i]
      this.getList()
    },
    async getBankDictList() {
      const res = await this.$api.riders.getDictList({ type: 'riders_learning_center_course_item' })
      if (res && res.code !== 200) {
        uni.showToast({
          title: res.msg,
          icon: "error",
        });
        return
      }
      if (res.data && res.data.length > 0) {
        res.data.forEach((item, index) => {
          this.list[index].name = item.dictLabel
          this.studyOption.push({
            value: item.dictValue,
            label: item.dictLabel,
          });
        })
      }
      this.courseItem = this.studyOption[this.current].value
      this.getList()
    },
  }
}
</script>

<style scoped lang="scss">
.webIndex-study {
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: #f5f5f5;
}

.long-img /deep/.u-image__loading {
  width: 100%;
  height: 100vh;
}

.study-title {
  font-size: 60rpx;
  color: #fff;
  font-weight: 550;
  margin: 30rpx 0;
}

/deep/.u-alert-tips {
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 60rpx;
  background-color: #f29100;
  padding: 26rpx;
  width: 90%;
}

.study-content {
  /deep/.u-alert-desc {
    font-size: 46rpx;
    font-weight: 550;
    color: #fff9f9;

  }
}

.webIndex-studyList-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  margin: 0 20rpx;
  border-radius: 15rpx;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
  margin-bottom: 10rpx;
}

.webIndex-studyList-item-center {
  min-height: 120rpx;
  padding-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 0.85;
  overflow: hidden;
}

.webIndex-studyList-item-text {
  font-size: 32rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

}
</style>
